<template>
  <div>
    <orderHeaderVue title="本年数据分析" />
    <StatisticsVue title="Yearly Repoet" :Data="Data" v-if="loading" :key="Commond" />
  </div>
</template>

<script>
import orderHeaderVue from "../components/orderHeader.vue";
import { defineComponent, onBeforeMount, onMounted, reactive, ref } from "vue";
import StatisticsVue from "../components/Statistics.vue";
import { queryweek, getYMD, Rule } from "../utils/tools";
import { postJSON } from "../utils/request";
export default defineComponent({
  components: {
    orderHeaderVue,
    StatisticsVue,
  },
  setup() {
    let myDate = new Date();
    var currentYear = myDate.getFullYear();
    var firstDay = new Date(currentYear, 0, 1);
    var lastDay = new Date(currentYear + 1, 0, 0);
    firstDay = getYMD(firstDay).TimeData;
    lastDay = getYMD(lastDay).TimeData;

    // 获得这周得日期范围
    const NowDate = queryweek(myDate);

    // loading加载指令
    const loading = ref(false);

    // 这周开始得时间戳
    const WeekStartTime = NowDate.WeekStartDate;

    const Commond = ref(3);

    const Data = reactive({
      DateRange: [firstDay, lastDay],
      StatisticsData: {},
      reglabel: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
    });

    // for (let i = 1; i <= new Date(lastDay).getDate(); i++) {
    //   let params = "";
    //   params = Rule(myDate.getMonth()) + "/" + Rule(i);
    //   Data.reglabel.push(params);
    // }

    onMounted(async () => {
      let params = {
        WeekStartTime: firstDay,
        Months: new Date(firstDay).getMonth(),
        Year: new Date(firstDay).getUTCFullYear(),
        Week: new Date(firstDay).getDay(),
        Day: new Date(firstDay).getDate(),
        Commond: Commond.value,
      };

      await postJSON("/OneWeek", params).then((res) => {
        Data.StatisticsData = res.data;
        loading.value = true;
      });
    });

    console.log(Data);

    onMounted(() => {});
    return {
      Data,
      loading,
      Commond
    };
  },
});
</script>

<style scoped>
</style>